<script setup>
import {ref,onMounted} from 'vue';
import {ElImage, ElIcon, ElMessage} from 'element-plus';
import {CopyDocument, Delete} from '@element-plus/icons-vue';
import {useOcrStore} from "@/stores/OcrStore.js";

// 假设你已经有了一个包含多个图片URL和识别结果的数组

const ocrStore = useOcrStore()
const images = ref([]);


function init() {
  if (ocrStore.generalOcrResultList === null) {
    ElMessage({
      type: 'info',
      message: '返回结果为空，请稍后再试'
    })
  } else {
    images.value = ocrStore.generalOcrResultList
  }
}

//加载的时候将数据传给Images
onMounted(()=>{
  images.value = ocrStore.generalOcrResultList
})



function copyText(index, flag) {
  if (images.value.length > index) {
    if (flag === 1) {
      navigator.clipboard.writeText(images.value[index].result).then(function () {
        ElMessage({
          message: '内容已复制到剪贴板',
          type: 'success',
        });
      }, function (err) {
        ElMessage({
          message: '复制失败: ' + err,
          type: 'error',
        });
      });
    } else {
      navigator.clipboard.writeText(images.value[index].result.replace(/\n/g, '')).then(function () {
        ElMessage({
          message: '内容已复制到剪贴板',
          type: 'success',
        });
      }, function (err) {
        ElMessage({
          message: '复制失败: ' + err,
          type: 'error',
        });
      });
    }
  }
}



function clearText(index) {
  // 清除特定索引的图片结果
  if (images.value.length > index) {
    // 清空结果文本和准确率
    images.value[index].result = ' ';
    images.value[index].accuracy = ' ';


    ElMessage({
      message: '结果已清除',
      type: 'info',
    });
  } else {
    ElMessage({
      message: '清除结果失败，索引超出范围',
      type: 'error',
    });
  }
}

init()

</script>


<template>
  <div class="recognition-results">
    <div v-for="(item, index) in images" :key="index" class="image-result-item">

      <el-image
          style="width: 100%;"
          :src="item.url"
          fit="contain"
          :alt="item.alt"
      />
      <div v-if="item.result" class="result-text">
        <h2>图片{{ index + 1 }}
          &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          准确率：{{ ' ' + item.accuracy + '%&nbsp;' }}</h2>


        <p class="text-titles">逐行显示</p>

        <div class="resultDetail">
          <p v-html="item.result.replace(/\n/g, '<br>')"></p>
        </div>
        <p class="text-titles">答案汇总</p>
        <div class="result-All">
          <p>{{ item.result }}</p>
        </div>
      </div>

      <div class="action-buttons">
        <el-icon class="action-icon" @click="copyText(index,2)">
          <CopyDocument/>
        </el-icon>

        <el-icon class="action-icon" @click="clearText(index)">
          <Delete/>
        </el-icon>
      </div>
    </div>
  </div>
</template>


<style scoped>
.recognition-results {
  text-align: center;
  margin-top: 20px;
}

.image-result-item {
  margin-bottom: 20px;
  position: relative; /* 添加相对定位 */
}

.result-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 使文本标题靠左对齐 */
}

.text-titles {
  display: flex;
  justify-content: space-between; /* 两端对齐 */

}

.resultDetail, .result-All {
  border: 2px solid #ccc;
  border-radius: 4px;
  padding: 10px;
  min-height: 50px;
  overflow: auto;
  margin-top: 10px;
  background-color: #f9f9f9;
  width: 100%;
  box-sizing: border-box;
  word-wrap: break-word; /* 确保文本自动换行 */
  -webkit-user-select: text; /* 允许在Chrome、Safari和Opera中选中文本 */
  -moz-user-select: text; /* 允许在Firefox中选中文本 */
  user-select: text; /* 允许在大多数浏览器中选中文本 */
}

.action-buttons {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
  gap: 5px; /* 图标之间的间距 */
}

.action-icon {
  cursor: pointer;
}
</style>